<template>
  <div class="content">

    <a-row class="toolbar">
      <DatePanel :span="4" :value.sync="params.date" :allowClear="false" />
      <a-col :span="20">
        <a-divider type="vertical" />
        <a-button type="primary" icon="fa fa-search" @click="onRefresh">查询</a-button>
      </a-col>
    </a-row>

    <a-row :gutter="16">
      <!-- 平台告警统计 -->
      <a-col :span="12">
        <a-card class="smallHeader" hoverable>
          <div slot="title">
            <a-icon type="fa fa-bell" style="color: #1890ff; margin-right: 4px;" />平台告警统计
          </div>
          <div class="cardBody">
            <div class="block">
              <div class="value">1111</div>
              <div class="name">消息(次)</div>
            </div>
            <div class="block">
              <div class="value">1534</div>
              <div class="name">异常(次)</div>
            </div>
            <div class="flexBlock">
              <div class="rowBlock">
                <div class="rowName">提示</div>
                <div class="rowValue">0</div>
                <div class="rowUnit">次</div>
              </div>
              <div class="rowBlock">
                <div class="rowName">警告</div>
                <div class="rowValue">7</div>
                <div class="rowUnit">次</div>
              </div>
              <div class="rowBlock">
                <div class="rowName">警报</div>
                <div class="rowValue">1632</div>
                <div class="rowUnit">次</div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>

      <!-- 温湿度变化统计 -->
      <a-col :span="12">
        <a-card class="smallHeader" hoverable>
          <div slot="title">
            <a-icon type="fa fa-thermometer-half" style="color: #52c41a; margin-right: 4px;" />温湿度变化统计
          </div>
          <div class="cardBody">
            <div class="block">
              <div class="value">1111</div>
              <div class="name">消息(次)</div>
            </div>
            <div class="block">
              <div class="value">1534</div>
              <div class="name">异常(次)</div>
            </div>
            <div class="flexBlock">
              <div class="rowBlock">
                <div class="rowName">提示</div>
                <div class="rowValue">0</div>
                <div class="rowUnit">次</div>
              </div>
              <div class="rowBlock">
                <div class="rowName">警报</div>
                <div class="rowValue">1632</div>
                <div class="rowUnit">次</div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" class="marginTop16">
      <!-- 温度越限告警 -->
      <a-col :span="12">
        <a-card class="smallHeader" hoverable>
          <div slot="title">
            <a-icon type="fa fa-thermometer" style="color: #faad14; margin-right: 4px;" />温度越限告警
          </div>
          <div class="cardBody">
            <div class="block">
              <div class="value">1111</div>
              <div class="name">消息(次)</div>
            </div>
            <div class="block">
              <div class="value">1534</div>
              <div class="name">异常(次)</div>
            </div>
            <div class="flexBlock">
              <div class="rowBlock">
                <div class="rowName">提示</div>
                <div class="rowValue">0</div>
                <div class="rowUnit">次</div>
              </div>
              <div class="rowBlock">
                <div class="rowName">警报</div>
                <div class="rowValue">1632</div>
                <div class="rowUnit">次</div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>

      <!-- 安装覆盖统计 -->
      <a-col :span="12">
        <a-card class="smallHeader" hoverable>
          <div slot="title">
            <a-icon type="fa fa-globe" style="color: rgb(16, 142, 233); margin-right: 4px;" />安装覆盖统计
          </div>
          <div class="cardBody">
            <div class="block">
              <div class="value">1111</div>
              <div class="name">消息(次)</div>
            </div>
            <div class="block">
              <div class="value">1534</div>
              <div class="name">异常(次)</div>
            </div>
            <div class="flexBlock">
              <div class="rowBlock">
                <div class="rowName">提示</div>
                <div class="rowValue">0</div>
                <div class="rowUnit">次</div>
              </div>
              <div class="rowBlock">
                <div class="rowName">警告</div>
                <div class="rowValue">7</div>
                <div class="rowUnit">次</div>
              </div>
              <div class="rowBlock">
                <div class="rowName">警报</div>
                <div class="rowValue">1632</div>
                <div class="rowUnit">次</div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>

</template>

<script>
import DatePanel from '@/components/toolbar/DatePanel';
import moment from 'moment';

export default {
  name: 'home',
  components: { DatePanel },

  data() {
    return {
      params: {
        date: moment()
      }
    };
  },
  methods: {
    onRefresh() {
      console.log(this.params.date);
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  padding: 16px;
  min-width: 1100px;
}

.marginTop16 {
  margin-top: 16px;
}

.cardBody {
  height: 200px;
  width: 100%;

  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  align-content: stretch;
  -webkit-align-content: stretch;
  align-items: stretch;
  flex-flow: row;
  height: 100%;
  justify-content: space-between;

  .block {
    width: 120px;
    height: 100px;
    margin-right: 16px;
    border: 1px solid rgb(239, 239, 239);
    background-color: rgb(239, 239, 239);
    cursor: pointer;

    &:hover {
      padding-top: 2px;
      padding-left: 4px;
      border: 1px solid rgb(16, 142, 233);
      background-color: #f6f6f6;
    }

    .value {
      margin: 0px;
      text-align: center;
      margin-top: 19.5px;
      font-size: 36px;
      font-weight: bold;
      line-height: 38px;
      font-family: "Cambria", "Helvetica Neue", helvetica, arial, verdana, sans-serif;
    }
    .name {
      font-size: 13px;
      text-align: center;
      color: #404040;
    }
  }

  .flexBlock {
    height: 100px;
    flex: 1;

    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    align-content: stretch;
    -webkit-align-content: stretch;
    align-items: stretch;
    flex-flow: column;
    width: 100%;

    .rowBlock {
      flex: 1;
      border: 1px solid rgb(239, 239, 239);
      background-color: rgb(239, 239, 239);
      cursor: pointer;
      &:not(:first-child) {
        margin-top: 8px;
      }
      &:hover {
        padding-left: 2px;
        border: 1px solid rgb(16, 142, 233);
        background-color: #f6f6f6;
      }

      display: flex;
      display: -webkit-flex;
      flex-direction: row;
      -webkit-flex-direction: row;
      align-items: center;

      .rowName {
        flex: 1;
        padding-left: 4px;
      }
      .rowValue {
        width: 100px;
        text-align: right;
        padding-right: 8px;
        font-size: 24px;
        font-weight: bold;
        line-height: 24px;
        font-family: "Cambria", "Helvetica Neue", helvetica, arial, verdana, sans-serif;
      }
      .rowUnit {
        width: 50px;
        line-height: 28px;
      }
    }
  }

  // 以下为 color
  .primaryColor {
    color: rgb(16, 142, 233);
  }
}

.cellBtn {
  border-radius: 2px;
  margin-left: 4px;
  width: 32px;
}
</style>
